<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<style>
			
			.discover_item{ padding:15px 15px 60px; background:#fff;  }
			.mui-content{ height:100vh; padding-bottom:45px;}
			.headimg{ height:50px; line-height: 50px; display: inline-block; float:left; }
			.headimg span{  height:50px; line-height:50px; display:inline-block; padding-left:10px;}
			 .headimg img{ width:50px; display:inline-block; vertical-align: middle; height:50px; border-radius:50%; }
			 .books_name{ padding:10px 0; font-size:16px; font-weight:550;} 
			 .article{ overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 4; line-height:35px;
  -webkit-box-orient: vertical;  }
  			.articleImg img{  width:100%; height:100%; display: block;}
  			.comment{ margin:10px 0;}
  			.comment_top span{ display:inline-block;  height:20px; line-height:20px;  vertical-align:middle; }
  			.comment_top img{ width:30px;height:30px; line-height:20px; border-radius: 50%;  vertical-align: middle;   display:inline-block; }
  			.bottom_right>div{ display:inline-block; vertical-align: middle;  margin-left:2%; height:20px;  line-height:20px;}
  			.bottom_right>div:first-child{ margin-left:0;}
  			.bottom_right{ text-align: right;}
  			.heads{ display:flex; justify-content: space-between; align-items: center;}
  			
  			.follow{   display:inline-block; border:1px solid #ccc; padding:2px 5px; border-radius:5px;  float:right; vertical-align: middle;}
  			.follow span{ height:25px; line-height:25px; display:inline-block;font-size:14px;}
  			.follow img{ width:16px; height:16px; display:inline-block;vertical-align: middle; }
  			.head_time{ padding:10px 0; color:#424242;}
  			.discover_title{ font-size:16px;  margin-top:10px;}
  			.discover_top{ padding-bottom:10px; border-bottom:1px solid #ccc;}
  			.comment_top{ display:flex; justify-content: space-between; align-items: center;font-size:16px; padding:5px 0; }
  			.comment_content{color:#404040; font-size:16px;}
  			.comment_reply>div{ background:#F2F2F2 ; color:#404040;font-size:14px; margin:5px 0; padding:5px;}
  			.reply_name{ color:#7CA5E7; display:inline-block; vertical-align:top; }
  			.reply_item{ position:relative;}
  			.reply_item span{ width:55%; display:inline-block; }
  			.reply_item .reply_name:last-child{ position:absolute; right:15px;}
  			.comment_ipt{  margin-bottom:5px; width:100%; }
  			.comment_ipt input{ 
  				width:78%; 
  				height:35px; 
  				border:0; 
  				background: #F2F2F2; 
  				padding:11px 15px; 
  				border-radius: 5px;
  			}
  			.comment_ipt .submit{ width:20%; text-align: right; height:35px; line-height:35px; background-color:#7DB1FD; border-radius: 5px; display: inline-block;  text-align:center;  color:#fff;}
  			.footer{ 
  				position: fixed; 
  				bottom:0; 
  				width:100%; 
  				/*display: flex; 
  				justify-content: space-between; */
  				background:#fff; 
  				/*align-items: center; */
  			}
  			.footer>.caozuodiv{
  				display: flex; 
  				justify-content: space-between; 
  				background:#fff; 
  				align-items: center; 
  			}
  			.caozuodiv>div{ 
  				width:25%; 
  				display: flex; 
  				flex-direction:column; 
  				text-align: center; 
  				padding: 5px;
  			}
  			.footer img{
  				width:25px; 
  				height:25px; 
  				display:block; 
  				margin:10px auto 5px;
  			}
  			
  				
  			.reply_but{
  				width: 100%;
  				text-align: right;
  				color:#7CA5E7; display:inline-block; vertical-align:top;
  				
  			}
  			.reply_but>span{
  				padding: 5px 10px;
  			}
  			
  			.huifudiv{
  				width: 100%;
  				display: flex;
  				justify-content: space-between;
  				align-items: center;
  				padding: 5px 1em;
  			}
  			
  			.title{ 
  				width:100%; 
  				padding:11px 15px; 
  				background:#fff; 
  				border-bottom:1px solid #dcdcdc;
  				display: flex;
  				justify-content: space-around;
  				align-items: center;
  			}
  			.title>div{
  				width: 50%;
  				text-align: center;
  			}
  			.fgd{
  				width: 100%;
  				height: 3.8em;
  				background-color: white;
  			}
  			
  			video{
				width: 100%;
			}
			.replyspan>img{
				width: 1.2em;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">渭书</h1>
		</header>
		
		<div class="mui-content">
			<!--
            	作者：592176224@qq.com
            	时间：2019-03-28
            	描述：
			<div class="title">
				<div id="">
					收藏
				</div>
				<div id="">
					分享
				</div>
			</div>	
            -->
			<div >
				<div class="discover_item">
					<div class="discove_top">
					</div>
					<div class="discover_bottom"> 
						<div class="discover_title">评论(<span class="plsum"></span>)</div>
						<div class="discover_content">
							
						</div>
					</div>
							
				</div>
				<div class="fgd">
					
				</div>
				<div  class="footer">
					<div class="huifudiv">
						<span id="huihurenid">
						</span>
						<span id="quxiaoid">
							取消
						</span>
					</div>
					<div class="comment_ipt">
						<input  id="focus" autofocus="autofocus" type="" placeholder="写下你的评论" />
						<div class="submit">发送</div>
					</div>
					<div class="caozuodiv">
						<div class="" onclick="deleteColl()">
							<!--
                            	作者：592176224@qq.com
                            	时间：2019-03-22
                            	描述：
							<img src="../images/coll.png" alt="" />
							<span>收藏</span>
                            -->
						</div>
						<!--<div class="">
							<img src="../images/follow.png" alt="" />
							<span>关注</span>
						</div>-->
						<div class="reply_btns">
							<!--
                            	作者：592176224@qq.com
                            	时间：2019-03-22
                            	描述：
							<img src="../images/comment.png" alt="" />
							<span>评论</span>
                            -->
						</div>
						<div class="">
							<!--
                            	作者：592176224@qq.com
                            	时间：2019-03-22
                            	描述：
							<img src="../images/share.png" alt="" />
							<span>分享</span>
                            -->
						</div>
					</div>
				</div>
		
			</div>
		</div>
		<script	 src="../js/jquery.min.js"></script>
		<script src="../js/req.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/muishow.js"></script>
			
		<script type="text/javascript">
			
			var circle_id = 0,	//分享圈id
			user_id = 0,			//user_id
			com_id = '',			//要评论人id
			cid = '',				//会话id
			hname= '' ,				//被回复人
			cname = '',				//被回复人
			circle_data = '';
			window.onload = function(){
				
				mui.init();
				circle_id = getrequest().id;
				user_id = getrequest().uid;
				console.log(circle_id)
				console.log(user_id)
				mui.plusReady(function(){
					
				})
				
				//监听回复
				$('body').on('tap','.reply_btn',function(){
					circleid = $(this).data('circle_id')
					cid = $(this).data('cid');
					comid = $(this).data('comid');
					hname = $(this).data('name');
					
					$("#focus").attr('placeholder','回复'+hname)
					$("#focus").focus(function(){});
				})
				
				
				$('body').on('tap','.reply_btns',function(){
					circleid = $(this).data('circle_id');
					$("#focus").attr('placeholder','回复'+circle_data.circle_title)
					$("#focus").focus(function(){});
				})
				
				//点击发送
				$(".submit").on('click',function(){
					var content = $("#focus").val();
					if(!content){
						mui.toast('评论内容不能为空!');
						return;
					}
					let data = {
						url: "/api/Circle/circleComment",
						data: {
							access_token: acctoken() || "",
							circle_id:circle_id || '',
							comment_id:com_id || user_id,
							c_id:cid || '',
							content:content 
						}
					}
					ajax(data, function(res) {
						mui.toast(res.message);
						getbook_list();
						com_id = ''
						cid = '';
						cname = '';
						sethuihurenid();
						g("focus").value = '';
						
					})
				})
				
				//点击 设置被评论人
				$("body").on("tap",".replyspan",function(e){
					
					com_id = $(this).data('com_id')
					cid = $(this).data('cid');
					cname = $(this).data('cname');
					sethuihurenid()
				})
				
				//删除评论
				$("body").on("tap",".removecircle",function(e){
					var cid = $(this).attr("data-id");
					mui.confirm("是否删除？","",["取消","确认"],function(e){
						if(e.index == 1){
							var data = {
								url:"/api/Circle/delComment",
								data:{
									access_token:acctoken(),
									id:cid,
									circle_id:circle_id
								}
							}
							ajax(data,function(res){
								console.log(res);
								mui.toast(res.message);
								getbook_list();
							})
						}
						
					})
				})
				
				//取消回复人id
				g("quxiaoid").addEventListener("tap",function(e){
					com_id = ''
					cid = '';
					cname = '';
					sethuihurenid();
				})
				
				getbook_list();
				
			}
			//设置huihurenid
			function sethuihurenid(){
				if(cname&&''!=cname){
					g("huihurenid").innerHTML = "@:"+cname;
				}else{
					g("huihurenid").innerHTML = '';
				}
			}
			
			
			
			//取消收藏？
			function deleteColl(id){
				  
	        		let data = {
						url:"/api/Book/book_keep_delete",
						data:{
							access_token : acctoken()||"",
							id:id
						}
					}
					ajax(data,function(res){
						if(res.code == -1){
							mui.toast(res.message);
						}
						if(res.code == 1){
							console.log(res);
							bookdetails();
							mui.toast("已取消收藏");
							
						}
					})
	    }
			//获取分享详情
			function getbook_list() {
						let data = {
							url: "/api/Circle/circleInfo",
							data: {
								access_token: acctoken() || "",
								circle_id:circle_id,
								user_id:user_id
							}
						}
						ajax(data, function(res) {
							console.log("分享详情",res);
							if(res.code == 1){
								com_id = res.data[0].circle_data.user_id;
								user_id = res.data[0].circle_data.user_id;
								setbook_list(res.data[0])
							}else{
								mui.toast(res.message);
							}
							
						})
			}
			//设置分享详情
			function setbook_list(list){
				var list1 = list.circle_data;
				var ctime =  getLocalTime(parseInt(list1.createtime));
				var str = '<div class="heads"><div class="headimg"> '+
						'<img src="../images/60x60.gif" alt="" /> '+
						'<span>'+list1.member.nickname+'</span></div>'+
						'</div>'+
						'<div class="head_time">'+ctime+'</div>'+
						'<div class="mui-row discover_top">'+
							'<div class="mui-col-sm-12 article">'+list1.circle_content+'</div>';
						if(list1.circle_img){
							str += '<div class="mui-col-sm-12 articleImg" >'+
							'<img src="'+list1.circle_img+'" alt="" /></div>';
						}
						if(list1.circle_music){
							//../audio/JNYW.mp3   ${list1.circle_music}
						   str += `<div class="mui-col-sm-12  Audio">
								<audio id="audioTag" controls="controls" loop="loop" preload="auto">
									<source src="../audio/JNYW.mp3"></source>
								</audio>
								</div>`;  
						}
						//${list1.circle_video}
						if(list1.circle_video){
							str += `<div class="mui-col-sm-12  Audio">
								<video controls="controls" preload="auto">
									<source src="../vidoe/dmp.mp4"></source>
								</video>
							</div>`;
						}
							
						'</div>';
				$('.discove_top').html(str);
				$(".plsum").text(list.length);
				var comment = '';
				var comment_data = list.comment_data;
				
				for(var key in comment_data){
					comment += '<div class="comment">';
					comment_data[key].forEach(function(item,index){
						var createtime =  getLocalTime(item.createtime);
						if(index == 0){
										comment += '<div class="comment_top">'+
												'<div class="commentName"> <img src="../images/60x60.gif" alt="" /> <span>'+item.member.nickname+'</span></div>'+
												'<div class="time commentTime">'+createtime+'</div>'+
											'</div>'+
											'<div class="comment_content">'+item.content+'</div>'+
											'<div class="reply_but " '+
											'"  data-comid="'+item.user_id+'" '+
											'data-name="'+item.member.nickname+'" >'+
											'<span class="replyspan" data-cid="'+item.c_id+'" data-cname="'+item.member.nickname+'" '+
											' data-com_id="'+item.member.id+'" id="reply_btn"><img src="../images/comments.png" alt="" /></span>'+
											'<span class="removecircle" data-id="'+item.id+'" id="">删除</span>'+
											'</div>';
							
						}else{
							
							comment += '<div class="comment_reply">'+
											'<div class="reply_item"> <div class="reply_name"> '+
											item.member.nickname + '@'+ item.member.nickname+':</div> <span>'+item.content+
											'</span> '+
											
											'</div>'+
											'</div>';
						}
						
					})
					
					comment += '</div>';
				}
				$('.discover_content').html(comment);
			}
			
			
		</script>
	</body>

</html>